<template>
	<view class="cnt1">
		<u-navbar :autoBack="true" bgColor="rgba(0,0,0,0)" :fixed="true" ></u-navbar>
		
		<view class="content1">
			<view class="tit display-flex">
				新增橱窗
				<image :src="'/images/helpicon.png' | formatImgUrl" mode="aspectFit" @tap="show1=true"></image>
			</view>
			<view class="tip ">
				请选择您想要创建的橱窗类型
			</view>
			<view class="wrap">
				<!-- <view class="item" v-for="i in wrapList" @click="!i.user_arr?$go('/showcase/showcase/edit?type='+i.id+'&type_name='+i.tit):$go('/showcase/showcase/edit?id='+i.user_arr.id)"> -->
				<view class="item" v-for="i in wrapList"
					@click="!is_dong? goTo(i) : showTips">
					<view class="head">
						<view class="left">
							<image :src="i.iconing | formatImgUrl" mode="" v-if="(i.zz_status == 0 || i.zz_status == 1) && i.id != 6"></image>
							<image :src="i.url | formatImgUrl" mode="" v-else></image>
							<text :class="(i.zz_status == 0 || i.zz_status == 1) && i.id != 6 ? 'text999' : ''">{{i.tit}}</text>
						</view>
						<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
					</view>

					<view v-if="i.id!=6">
						<view class="tip" v-if="i.zz_status == 0">
							点击进行资质认证
						</view>
						<view class="tip" v-if="i.zz_status == 1">
							正在审核，请耐心等待
						</view>
						<view class="tip suc" v-if="i.zz_status == 2">
							设置橱窗
						</view>
						<view class="tip red" v-if="i.zz_status == 3">
							要求修改
						</view>
					</view>
					<view v-else>
						<view class="tip suc">
							新增橱窗
						</view>
					</view>


				</view>

			</view>
		</view>

		<!-- 橱窗须知 -->
		<u-popup :show="show1" mode="center" @close="close" @open="open">
			<view class="biaoqian">
				<view class="top">
					<image :src="userInfo.pic | formatImgUrl" mode=""></image>
					<view class="top_username">{{userInfo.username}}</view>
					<view class="createbtn">创建橱窗</view>
				</view>
				<view class="tab">
					本平台提供的写手橱窗服务旨在为用户提供各种类型的例文展示，方便用户了解和选择合适的写作服务。以下是例文展示的类型和相关说明：
				</view>
				<scroll-view scroll-y="true" class="scroll">
				
					<view class="">
						商用文：涉及商用的文案、文章，如企业标语、商务文案、商用剧本、商用歌词等。此类例文旨在展示写手的商业写作能力和经验，帮助用户了解写手的专业水平。
					</view>
					<view class="">
						宣发文：具有宣发、广告性质的文案、文章，如官网文案、公众号推文、企业文案、宣传文案、活动文案、营销文案、推广文案等。此类例文旨在展示写手的宣发能力和创意，帮助用户实现品牌推广和营销目标。
					</view>
					<view class="">
						应用文：日常生活用文，如发言稿、演讲稿、工作报告、征文、汇报、读后感、观后感心得、情书等。此类例文旨在展示写手的应用文写作能力和经验，帮助用户解决各种实际问题。
					</view>
					<view class="">
						写文案：互联网文案，如各大社交平台风格的文案、软文、朋友圈文案、电商文案、产品文案等。此类例文旨在展示写手的互联网文案写作能力和创意，帮助用户实现社交媒体营销和品牌传播。
					</view>
					<view class="">
						润色修改：对已有文案、文章进行润色修改，如稿件润色、简历修改等。此类例文旨在展示写手的语言功底和修改能力，帮助用户提升文章质量。
					</view>
					<view class="">
						定制文章：根据用户定制需求创作的文案、文章。此类例文旨在展示写手的定制写作能力和服务质量，帮助用户实现个性化的写作需求。
					</view>
					
					<view class="white_mask">

					</view>
				</scroll-view>

				<image class="cl1" @click="show1=false" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wrapList: [{
					url: '/images/reserve_icon1.png',
					tit: '商用',
					tip: '进行资质认证',
					id: 0
				}],
				user_arr: [],
				userInfo: this.$db.get('userInfo'),
				show1: false,
				is_dong: ''
			}
		},
		onShow() {
			this.get_data();
			this.getAccountState()
		},
		methods: {
			goTo(i){
				if(i.zz_status == 1){
					this.$common.errorToShow('正在审核，请耐心等待')
					return
				}
				
				if(i.zz_status == 0 && i.id !=6){
					uni.setStorageSync('type_name',i.tit)
					this.$go('/showcase/showcase/authen?id='+i.id)
					return
				}
				
				if(i.user_arr && i.id !=6){
					this.$go('/showcase/showcase/edit?id='+i.user_arr.id+'&type_name='+i.tit +'&type='+i.id)
				}else{
					this.$go('/showcase/showcase/edit?type='+i.id+'&type_name='+i.tit)
				}
				
			},
			get_data() {
				let that = this;
				this.$api.default.request('user/get_goods_list_tow').then((res) => {
					if (res.code) {
						that.wrapList = res.data
					}
				})
			},
			// 当前账号的冻结信息
			getAccountState(){
				this.$api.default.request('index/getStatus', {
					type: 2,//0冻结动态 1冻结聊天 2冻结橱窗 3抢单权限 4发单权限 5下单权限 6提现权限 7充值权限
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.is_dong = res.is_dong
					}
				})
			},
			showTips(){
				if(this.is_dong == 1){
					this.$common.errorToShow('您的橱窗创建权限已被暂时关停')
					return
				}
				
				uni.showToast({
					title: '正在审核，请耐心等待',
					icon: 'none',
					duration: 2000
				});
			},
			// 关闭须知弹窗
			close() {

			},
			// 开启须知弹窗
			open() {

			},
		}
	}
</script>

<style lang="scss" scoped>
	.cnt1 {
		background: url('https://cdnauth.dreamyuewen.com/images/showcase_bg.jpg');
		background-size: 100%;
		width: 100%;
		height: 100vh;
		padding-top: 75px;
		box-sizing: border-box;
	}

	.content1 {
		padding: 80rpx 60rpx;

		.tit {
			font-size: 48rpx;
			font-weight: bold;
			color: #3D3D3D;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-left: 15rpx;
			}
		}

		.tip {
			font-size: 24rpx;
			color: #999999;
			margin-top: 16rpx;
		}

		.wrap {
			display: grid;
			grid-gap: 28rpx 24rpx;
			grid-template-columns: repeat(auto-fill, 296rpx);
			padding-bottom: 20rpx;
			justify-content: space-between;
			margin-top: 20rpx;

			

			.item {
				width: 296rpx;
				height: 110rpx;
				border-radius: 8rpx;
				padding: 14rpx 20rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				box-shadow: 0px 0px 10rpx 0px rgba(72, 147, 136, 0.15);

				.head {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: bold;
						color: #3D3D3D;

						image {
							width: 32rpx;
							height: 32rpx;
							object-fit: cover;
							margin-right: 16rpx;
						}
						
						.text999{
							color: #999;
						}
					}

					.rarr {
						width: 40rpx;
						height: 40rpx;
						flex-shrink: 0;
					}
				}

				.tip {
					font-size: 20rpx;
					font-weight: normal;
					color: #999;
					margin-top: 8rpx;
				}
				
				.suc {
					color: #45C4B0;
				}
				
				.red{
					color: #ED3232;
				}
			}
		}
	}

	.biaoqian {

		border-radius: 0.5em;
		background: #fff;
		width: 600rpx;
		margin: 0 auto;
		position: relative;

		.top {
			padding-top: 70rpx;
			font-size: 28rpx;
			color: #000;
			text-align: center;
			width: 90%;
			margin-left: 5%;

			image {
				width: 130rpx;
				height: 130rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -35px;
				margin: 0 auto;
				border-radius: 20em;
			}

			.top_username {
				font-weight: 700;
				font-size: 16px;
				color: #3D3D3D;
			}

			view {
				&:last-child {
					margin-top: 6px;
					font-family: '思源黑体';
					font-size: 12px;
					color: #45C4B0;
				}
			}
		}

		.tab {
			padding-top: 10rpx;
			font-size: 21rpx;
			font-weight: 700;
			width: 90%;
			margin-left: 5%;
			float: left;
			text-align: center;
			font-family: '思源黑体';
			font-weight: 700;
			font-size: 14px;
			margin-top: 28rpx;
			margin-bottom: 28rpx;
		}

		.scroll {
			padding: 30rpx;
			padding-bottom: 20rpx;
			height: 650rpx;
			box-sizing: border-box;
			font-family: '思源黑体';
			font-size: 14px;
			color: #999;
			position: relative;
			overflow: hidden;
			
			view{
				margin-bottom: 20rpx;
			}
		}

		.white_mask{
			position: sticky;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 80rpx;
			background: linear-gradient(to bottom, rgba(255,255,255, 0),rgba(255,255,255, .8));
		}
	}

	.cl1 {
		height: 60rpx;
		width: 60rpx;
		position: relative;
		top: 115rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>